Latviešu

Visaptverošs ceļvedis par ARIA iezīmju izmantošanu, lai uzlabotu ekrāna lasītāju saderību un vietnes pieejamību globālai auditorijai.

Ekrāna lasītāju saderība: ARIA iezīmju apgūšana pieejamībai

Mūsdienu digitālajā vidē nodrošināt pieejamību visiem lietotājiem ir ne tikai labākā prakse, bet arī fundamentāla prasība. Viens no būtiskiem tīmekļa pieejamības aspektiem ir padarīt saturu lietojamu ekrāna lasītāju lietotājiem. ARIA (Accessible Rich Internet Applications) iezīmes spēlē vitālu lomu, lai pārvarētu plaisu starp vizuālo prezentāciju un informāciju, kas tiek nodota ekrāna lasītājiem. Šis visaptverošais ceļvedis izpētīs ARIA iezīmju spēku, to pareizu lietošanu un to, kā tās veicina iekļaujošāku tīmekļa pieredzi globālai auditorijai.

Kas ir ARIA iezīmes?

ARIA iezīmes ir HTML atribūti, kas nodrošina ekrāna lasītājiem aprakstošu tekstu elementiem, kuri paši par sevi varētu nebūt pieejami. Tie piedāvā veidu, kā papildināt vai aizstāt informāciju, ko ekrāna lasītājs parasti paziņotu, pamatojoties uz elementa lomu, nosaukumu un stāvokli. Būtībā ARIA iezīmes precizē interaktīvo elementu mērķi un funkciju, nodrošinot, ka lietotāji ar redzes traucējumiem var efektīvi navigēt un mijiedarboties ar tīmekļa saturu.

Iedomājieties to kā alternatīvā teksta (alt text) nodrošināšanu interaktīviem elementiem. Kamēr `alt` atribūti apraksta attēlus, ARIA iezīmes apraksta tādu lietu kā pogu, saišu, formas lauku un dinamiska satura *funkciju*.

Kāpēc ARIA iezīmes ir svarīgas?

ARIA atribūtu izpratne: aria-label, aria-labelledby un aria-describedby

Ir trīs galvenie ARIA atribūti, ko izmanto elementu iezīmēšanai:

1. aria-label

aria-label atribūts tieši nodrošina teksta virkni, ko izmantot kā elementa pieejamo nosaukumu. Izmantojiet to, ja redzamā iezīme nav pietiekama vai nepastāv.

Piemērs:

Apsveriet aizvēršanas pogu, kas attēlota ar "X" ikonu. Vizuāli ir skaidrs, ko tā dara, bet ekrāna lasītājam ir nepieciešams paskaidrojums.

<button aria-label="Aizvērt">X</button>

Šajā gadījumā ekrāna lasītājs paziņos "Aizvērt poga", sniedzot skaidru izpratni par pogas funkciju.

Praktisks piemērs (starptautisks):

E-komercijas vietne, kas pārdod preces visā pasaulē, varētu izmantot iepirkumu groza ikonu. Bez ARIA ekrāna lasītājs varētu vienkārši paziņot "saite". Ar `aria-label` tas kļūst:

<a href="/cart" aria-label="Apskatīt iepirkumu grozu"><img src="cart.png" alt="Iepirkumu groza ikona"></a>

To var viegli iztulkot citās valodās, lai nodrošinātu globālu pieejamību.

2. aria-labelledby

Atribūts aria-labelledby saista elementu ar citu elementu lapā, kas kalpo kā tā iezīme. Tas izmanto iezīmējošā elementa id. Tas ir noderīgi, ja redzama iezīme jau pastāv un jūs vēlaties to izmantot kā pieejamo nosaukumu.

Piemērs:

<label id="name_label" for="name_input">Vārds:</label>
<input type="text" id="name_input" aria-labelledby="name_label">

Šeit ievades lauks izmanto tekstu no <label> elementa (identificēts ar tā id) kā savu pieejamo nosaukumu. Ekrāna lasītājs paziņos "Vārds: rediģēt tekstu".

Praktisks piemērs (formas):

Sarežģītām formām ir ļoti svarīgi nodrošināt pareizu iezīmēšanu. Pareiza aria-labelledby izmantošana savieno iezīmes ar to atbilstošajiem ievades laukiem, padarot formu pieejamu. Apsveriet daudzpakāpju adreses formu:

<label id="street_address_label" for="street_address">Ielas adrese:</label>
<input type="text" id="street_address" aria-labelledby="street_address_label">

<label id="city_label" for="city">Pilsēta:</label>
<input type="text" id="city" aria-labelledby="city_label">

Šī pieeja nodrošina, ka saistība starp iezīmēm un laukiem ir skaidra ekrāna lasītāju lietotājiem.

3. aria-describedby

Atribūtu aria-describedby izmanto, lai sniegtu papildu informāciju vai detalizētāku aprakstu par elementu. Atšķirībā no `aria-labelledby`, kas sniedz *nosaukumu*, `aria-describedby` sniedz *aprakstu*.

Piemērs:

<input type="text" id="password" aria-describedby="password_instructions">
<p id="password_instructions">Parolei jābūt vismaz 8 rakstzīmes garai un jāsatur viens lielais burts, viens mazais burts un viens cipars.</p>

Šajā gadījumā ekrāna lasītājs paziņos ievades lauku (iespējams, tā iezīmi, ja tāda pastāv) un pēc tam nolasīs rindkopas saturu ar id "password_instructions". Tas sniedz lietotājam noderīgu kontekstu.

Praktisks piemērs (kļūdu ziņojumi):

Kad ievades laukā ir kļūda, aria-describedby izmantošana, lai saistītu to ar kļūdas ziņojumu, ir lieliska prakse. Tas nodrošina, ka ekrāna lasītāja lietotājs tiek nekavējoties informēts par kļūdu.

<input type="text" id="email" aria-describedby="email_error">
<p id="email_error" class="error-message">Lūdzu, ievadiet derīgu e-pasta adresi.</p>

Labākās prakses ARIA iezīmju izmantošanai

Biežākās ARIA iezīmju kļūdas, no kurām izvairīties

Praktiski piemēri un lietošanas gadījumi

1. Pielāgotas vadīklas

Veidojot pielāgotas vadīklas (piemēram, pielāgotu slīdni), ARIA iezīmes ir būtiskas, lai nodrošinātu pieejamību. Jums, visticamāk, būs jāizmanto ARIA lomas, stāvokļi un īpašības papildus iezīmēm.

<div role="slider" aria-label="Skaļums" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>

Šajā piemērā aria-label norāda slīdņa nosaukumu (Skaļums), un pārējie ARIA atribūti sniedz informāciju par tā diapazonu un pašreizējo vērtību. JavaScript tiktu izmantots, lai atjauninātu `aria-valuenow`, kad slīdnis mainās.

2. Dinamiska satura atjauninājumi

Vienas lapas lietojumprogrammām (SPA) vai vietnēm, kas lielā mērā paļaujas uz AJAX, ir ļoti svarīgi atjaunināt ARIA iezīmes, kad saturs dinamiski mainās.

Piemēram, apsveriet paziņojumu sistēmu. Kad pienāk jauns paziņojums, varat atjaunināt ARIA "dzīvo" reģionu (live region):

<div aria-live="polite" id="notification_area"></div>

Tad JavaScript tiktu izmantots, lai pievienotu paziņojuma tekstu šim div, padarot to paziņotu ekrāna lasītājam. `aria-live="polite"` ir svarīgs; tas norāda ekrāna lasītājam paziņot atjauninājumu, kad tas ir dīkstāvē, izvairoties no lietotāja pašreizējā uzdevuma pārtraukšanas.

3. Interaktīvas diagrammas un grafiki

Diagrammas un grafikus var būt grūti padarīt pieejamus. ARIA iezīmes var palīdzēt nodrošināt tekstuālus datu aprakstus.

Piemēram, stabiņu diagrammā katram stabiņam varētu izmantot aria-label, lai aprakstītu tā vērtību:

<div role="img" aria-label="Stabiņu diagramma, kas parāda pārdošanas apjomus katrā ceturksnī">
  <div role="list">
    <div role="listitem" aria-label="1. ceturksnis: $100,000"></div>
    <div role="listitem" aria-label="2. ceturksnis: $120,000"></div>
    <div role="listitem" aria-label="3. ceturksnis: $150,000"></div>
    <div role="listitem" aria-label="4. ceturksnis: $130,000"></div>
  </div>
</div>

Sarežģītākām diagrammām var būt nepieciešams tabulas datu attēlojums, kas ir saistīts, izmantojot `aria-describedby`, vai atsevišķs tekstuāls kopsavilkums.

Pieejamības testēšanas rīki

Vairāki rīki var palīdzēt jums identificēt potenciālās ARIA iezīmju problēmas:

Globāli apsvērumi

Ieviešot ARIA iezīmes globālai auditorijai, ņemiet vērā sekojošo:

Noslēgums

ARIA iezīmes ir spēcīgs rīks, lai uzlabotu ekrāna lasītāju saderību un tīmekļa pieejamību. Izprotot pareizu aria-label, aria-labelledby un aria-describedby lietošanu un ievērojot labāko praksi, jūs varat izveidot iekļaujošāku un lietotājam draudzīgāku tīmekļa pieredzi globālai auditorijai. Atcerieties vienmēr dot priekšroku semantiskajam HTML, rūpīgi testēt ar ekrāna lasītājiem un ņemt vērā lietotāju no dažādām vidēm vajadzības. Ieguldījums pieejamībā nav tikai atbilstības jautājums; tā ir apņemšanās radīt tīmekli, kas ir patiesi pieejams ikvienam.

Resursi